define(['./FormPlugin', 
    './models/FormWidgetType', 
    './FormPageController',
    './FormWidgetDirective'], 
    function(FormPlugin, FormWidgetType) {
    'use strict';
	FormPlugin.directive('formPage', ['$compile', function($compile) {

        function getWidgetDirective(widgetType) {
            if (widgetType == FormWidgetType.PushButton) {
                   return 'form-push-button';                  
            } else if (widgetType == FormWidgetType.RadioButton) {
                return 'form-radio-button';                       
            } else if (widgetType == FormWidgetType.CheckBox) {
                return 'form-check-box';                     
            } else if (widgetType == FormWidgetType.Text || widgetType == FormWidgetType.RichText) {
                return 'form-text';                
            } else if (widgetType == FormWidgetType.ListBox) {
                return 'form-list-box';                
            } else if (widgetType == FormWidgetType.ComboBox) {
                return 'form-combo-box';              
            }
        }
		return {
			restrict: 'EA',		
			replace: true,					
            controller: 'FormPageController',
			template: '<div class="fwr-form-fields-container"></div>',           
			link: function($scope, element, attr) {	     
                var watchFormPage = $scope.$watch("formPage" ,function(newValue) {
                    if (!newValue) return;                    
                    angular.forEach($scope.formPage.formWidgets, function(formWidget) {                        
                        var newScope = $scope.$new();
                        newScope.formWidget = formWidget;          
                        var template = "<div style='position: absolute' " +  getWidgetDirective(formWidget.type) + "/>";                       
                        var compiledContents = $compile(template);
                        compiledContents(newScope, function(clone) {
                            element.append(clone);
                        });                          
                    });                                 
                    watchFormPage();
                });

                $scope.needLayout = true;
                function layout(){
                    if ($scope.needLayout === false) return;
                    $scope.needLayout = false;                   
                    element.children().each(function(){                       
                        $(this).trigger("layout");
                    });
                }
                $scope.$watch("pageVisible", function(newValue) {                   
                    if (newValue){                                     
                        layout();
                    }
                    else{                      
                    }
                });

                $scope.$watch("scale", function(newValue, oldValue) {
                    //first called                  
                    if (newValue === oldValue) return;
                    $scope.needLayout = true;
                    if ($scope.pageVisible){
                        layout();
                    }                                       
                });  	

                /*
                element.on('click', '[form-check-box]', function(event) {
                    event.preventDefault();
                    var scope = $(this).scope();
                    scope.$evalAsync(function(){
                        scope.formWidget.bCheck = !scope.formWidget.bCheck;
                    });    

                    //this.focus();                                   
                });

                element.on('focus', '[tabindex]', function(event) {                    
                   event.preventDefault();
                   var scope = $(this).scope();                  
                   scope.$evalAsync(function(){
                        scope.formWidget.onfocus = true;
                    });                                        
                });

                element.on('blur', '[tabindex]', function(event) {
                    event.preventDefault();
                    var scope = $(this).scope();                  
                    scope.$evalAsync(function(){
                        scope.formWidget.onfocus = false;
                    });
                });*/


			}
		};
	}]);
});